<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.jpg" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">搜索</view>
    </view>

    <view class="operation-box">
      <view class="tab-box">
        <image class="active-icon" src="/static/images/search_active.png" v-if="tab === 1"></image>
        <view :class="['tab', (tab === 1) ? 'active' : '']" @click="changeTab(1)">推荐</view>
        <image class="active-icon" src="/static/images/search_active.png" v-if="tab === 2"></image>
        <view :class="['tab', (tab === 2) ? 'active' : '']" @click="changeTab(2)">匹配我的</view>
      </view>

      <view class="more-box" v-if="tab == 1" @click="toggleFilterBox">
        <view class="more-text">搜索</view>
        <image class="icon" src="/static/images/search-more.png"></image>
      </view>
    </view>

    <scroll-view scroll-y class="list-box" @scrolltolower="loadMore">
      <view class="box" @click="goUserDetail(item.id)" v-for="(item, index) in list" :key="index">
        <view class="left">
          <image class="avatar" mode="aspectFill" :src="item.avatar ? item.avatar : '/static/images/default_avatar.png'"></image>
          <view :class="['tag', item.gender == '男' ? 'nan' : '']">寻觅</view>
        </view>
        <view class="right">
          <view class="row" style="width: 130rpx">
            <view class="text">{{ item.username }}</view>
            <image class="sex" v-if="item.gender == '男'" src="/static/images/sex1.png"></image>
            <image class="sex" v-else src="/static/images/sex2.png" style="width: 24rpx"></image>
          </view>
          <view class="row">
            <view class="text">{{ item.residence }}</view>
            <view class="text">{{ item.age }}岁</view>
            <view class="text">{{ item.marital_status }}</view>
          </view>
          <view class="row" style="width: 320rpx">
            <view class="text">{{ item.height }}cm</view>
            <view class="text">{{ item.annual_income }}</view>
          </view>
          <view class="tag-box">
            <view :class="['tag', item.gender == '男' ? 'nan' : '']" v-for="val in item.hobby">{{ val }}</view>
          </view>
          <view class="row">
            <view class="yq-text">{{ item.requirement_marital_status ? item.requirement_marital_status : '' }}{{ item.requirement_age > 0 ? '，' + item.requirement_age : '' }}{{ item.requirement_height ? '，' + item.requirement_height : '' }}{{ item.requirement_annual_income ? '，' + item.requirement_annual_income : '' }}</view>
          </view>
        </view>
      </view>
    </scroll-view>


    <view class="filter-overlay" v-if="showFilterBox" @click="toggleFilterBox"></view>
    <view class="filter-box" :class="{ 'show': showFilterBox }">
      <view class="filter-content">
        <view class="sc" :style="{ marginTop: titleMargin - 10 + 'px' }">搜索</view>
        <input type="text" class="sc-input" placeholder="按用户ID/姓名" @input="changeInput" :value="search_info.idOrName">

        <view class="sex-box">
          <view class="sc">性别</view>
          <view class="all-sex-box">
            <view :class="['box', search_info.gender == '' ? 'active' : '']" @click="clickGender('')">不限</view>
            <view :class="['box', search_info.gender == '男' ? 'active' : '']" @click="clickGender('男')">男</view>
            <view :class="['box', search_info.gender == '女' ? 'active' : '']" @click="clickGender('女')">女</view>
          </view>
        </view>

        <view class="choose-box">
          <view class="row" @click="openPopup('age')">
            <view class="text">年龄范围</view>
            <view class="res-box">
              <view class="res">{{ search_info.age }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('height')">
            <view class="text">身高范围</view>
            <view class="res-box">
              <view class="res">{{ search_info.height }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('weight')">
            <view class="text">体重范围</view>
            <view class="res-box">
              <view class="res">{{ search_info.weight }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('residence')">
            <view class="text">工作地区</view>
            <view class="res-box">
              <view class="res">{{ search_info.residence }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('hukou')">
            <view class="text">户籍地区</view>
            <view class="res-box">
              <view class="res">{{ search_info.hukou }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('marital_status')">
            <view class="text">婚姻状况</view>
            <view class="res-box">
              <view class="res">{{ search_info.marital_status }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('education_level')">
            <view class="text">学历</view>
            <view class="res-box">
              <view class="res">{{ search_info.education_level }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('occupation')">
            <view class="text">职业</view>
            <view class="res-box">
              <view class="res">{{ search_info.occupation }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('annual_income')">
            <view class="text">年收入</view>
            <view class="res-box">
              <view class="res">{{ search_info.annual_income }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('housing_status')">
            <view class="text">住房情况</view>
            <view class="res-box">
              <view class="res">{{ search_info.housing_status }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('car_status')">
            <view class="text">购车情况</view>
            <view class="res-box">
              <view class="res">{{ search_info.car_status }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
          <view class="row" @click="openPopup('has_children')">
            <view class="text">子女情况</view>
            <view class="res-box">
              <view class="res">{{ search_info.has_children }}</view>
              <image class="icon" src="/static/images/choose.png"></image>
            </view>
          </view>
        </view>

        <view class="btn-box">
          <view class="btn" @click="reset">重置</view>
          <view class="btn search-btn" @click="search">搜索</view>
        </view>
      </view>
    </view>

    <view class="popup-overlay" :class="{ 'show': popup }" @click="closePopup">
      <view class="popup-content" @click.stop>
        <!-- 年龄范围 -->
        <block v-if="popupType === 'age'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="ageChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in ageData" :key="index">{{ item }}岁</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in ageData" :key="index">{{ item }}岁</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 身高范围 -->
        <block v-if="popupType === 'height'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="heightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 体重范围 -->
        <block v-if="popupType === 'weight'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="weightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in weightData" :key="index">{{ item }}kg</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in weightData" :key="index">{{ item }}kg</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 居住 -->
        <block v-if="popupType === 'residence'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="residenceChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[residenceChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 户籍 -->
        <block v-if="popupType === 'hukou'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="hukouChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[hukouChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 婚况 -->
        <block v-if="popupType === 'marital_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="maritalStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in maritalStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 学历 -->
        <block v-if="popupType === 'education_level'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="educationLevelChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in educationLevelData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 职业 -->
        <block v-if="popupType === 'occupation'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="occupationChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in occupationData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 年收入 -->
        <block v-if="popupType === 'annual_income'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="annualIncomeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in annualIncomeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 住房 -->
        <block v-if="popupType === 'housing_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="housingStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in housingStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 车辆 -->
        <block v-if="popupType === 'car_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="carStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in carStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 子女情况 -->
        <block v-if="popupType === 'has_children'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="hasChildrenChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in hasChildrenData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
      </view>
    </view>

    <view id="mask" v-if="show_login" @click.stop>
      <view class="mask-content" @click.stop>
        <form @submit="formSubmit" class="main-content">
          <view class="title">完善资料</view>
          <button open-type="chooseAvatar" @chooseavatar="getAvatar" class="avatar-btn">
            <image class="btnImg" :src="avatar_path" mode="aspectFill"></image>
          </button>
          <input type="text" :value="avatar" name="avatar" style="display: none">

          <view class="row">
            <view class="left">昵称</view>
            <input type="nickname" @focus="this.showLoginModel = true" @input="this.showLoginModel = true" :value="username" name="nickname" class="input" placeholder="请输入昵称">
          </view>

          <view class="row" style="border-top: none">
            <view class="left">手机号</view>
            <button open-type="getPhoneNumber" :plain="true" @getphonenumber="getPhoneNumber" class="mobile-btn" v-if="!mobile">获取手机号</button>
            <block v-else>
              <input type="number" :value="mobile" name="mobile" style="display: none">
              <view class="input">{{mobile}}</view>
            </block>
          </view>

          <view class="agree-box">
            <button hover-class="none" class="item agree-btn" open-type="agreePrivacyAuthorization">
              <checkbox :checked="is_agree" @click="doAgree" class="checkbox round color" color="#32A4FF" style="background: #FFF"/>
            </button>

            <view class="box">
              阅读并接受
              <text class="text" @click="openPrivacy">{{ privacyContractName }}</text>
            </view>
          </view>

          <input type="text" :value="openid" name="openid" style="display: none">

          <view class="btn-box">
            <button :plain="true" class="button cancel" @click="this.show_login = false">取消</button>
            <button form-type="submit" class="button save">保存</button>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
import region from '@/static/json/region.json';
import http from '@/utils/http'

export default {
  data() {
    return {
      titleMargin: 0, // 动态顶部间距
      showFilterBox: false,

      // 搜索列表 START
      tab: 1,
      is_search: false,
      list: [],
      page: 1,
      pagesize: 10,
      requirement_info: {},// 择偶要求
      search_info: {
        idOrName: '',
        gender: '',
        age: '',
        height: '',
        weight: '',
        residence: '',
        hukou: '',
        marital_status: '',
        education_level: '',
        occupation: '',
        annual_income: '',
        housing_status: '',
        car_status: '',
        has_children: ''
      },// 搜索条件
      // 年龄数据
      popup: false,
      popupType: '', // 控制弹窗类型
      // 年龄数据
      ageData: Array.from({length: 70 - 18 + 1}, (v, i) => i + 18),
      ageChooseValue: [0, 0],
      // 身高数据
      heightData: Array.from({length: 200 - 140 + 1}, (v, i) => i + 140),
      heightChooseValue: [0, 0],
      // 体重数据
      weightData: Array.from({length: 150 - 40 + 1}, (v, i) => i + 40),
      weightChooseValue: [0, 0],
      // 居住地数据
      region: region,
      residenceChooseValue: [0, 0],
      // 户籍数据
      hukouChooseValue: [0, 0],
      // 婚姻状况
      maritalStatusData: [],
      maritalStatusChooseValue: [0],
      // 学历
      educationLevelData: [],
      educationLevelChooseValue: [0],
      // 职业
      occupationData: [],
      occupationChooseValue: [0],
      // 年收入
      annualIncomeData: [],
      annualIncomeChooseValue: [0],
      // 住房情况
      housingStatusData: [],
      housingStatusChooseValue: [0],
      // 购车情况
      carStatusData: [],
      carStatusChooseValue: [0],
      // 子女情况
      hasChildrenData: [],
      hasChildrenChooseValue: [0],

      indicatorStyle: `height: 50px;`,

      is_search: 0,
      // 搜索列表 END
      // 自动登录参数
      show_login: false,
      login_to_url: '',// 登录之后跳转的页面
      privacyContractName: '《喜来啦隐私保护指引》',
      is_agree: false,
      avatar: 0,
      avatar_path: '../../static/images/default_avatar.png',
      mobile: '',
    };
  },

  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function () {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;

    this.$http.post('/index/Api/getSelectData').then(res => {
      var {maritalStatusData, educationLevelData, occupationData, annualIncomeData, housingStatusData, carStatusData, hasChildrenData} = res.data.data;
      // 婚况
      this.maritalStatusData = maritalStatusData;
      // 学历
      this.educationLevelData = educationLevelData;
      // 职业
      this.occupationData = occupationData;
      // 年收入
      this.annualIncomeData = annualIncomeData;
      // 住房
      this.housingStatusData = housingStatusData;
      // 车辆
      this.carStatusData = carStatusData;
      // 子女情况
      this.hasChildrenData = hasChildrenData;
    })

    if (user_id) {
      this.$http.post('/index/Api/getUserRequirement', {user_id}).then(res => {
        if (res.data.result == 1) {
          this.requirement_info = res.data.data
        }
      })
    }

    this.searchUserList();
  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function () {
      uni.navigateBack();
    },


    openPrivacy: function () {
      uni.openPrivacyContract()
    },

    getAvatar: function (e) {
      var {avatarUrl} = e.detail;

      uni.uploadFile({
        url: http.config.baseURL + '/Upload/UploadFile/uniUploadPicture', //服务端图片上传接口地址
        filePath: avatarUrl,
        name: 'download',
        formData: {},
        success: res => {
          res = JSON.parse(res.data)
          if (res.result === 1) {
            uni.showToast({
              title: '上传头像成功'
            })
            this.showLoginModel = true;
            this.avatar_path = res.data.path;
            this.avatar = res.data.id;
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        },
        fail: err => {
          setTimeout(() => {
            uni.hideLoading();
            uni.showToast({
              title: '图片上传失败',
              icon: 'none'
            })
          }, 500)
        }
      })
    },

    getPhoneNumber: function (e){
      var code = e.detail.code;
      this.$http.post('/index/Api/getMobile', {code}).then(res => {
        if (res.data.result === 1) {
          this.mobile = res.data.data
        }else{
          this.$common.doErrorResult(res)
        }
      })
    },

    doAgree: function () {
      this.is_agree = !this.is_agree;
    },

    formSubmit: function (e) {
      var formData = e.detail.value,
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      if (!this.is_agree) {
        uni.showToast({
          title: '请阅读并勾选小程序隐私保护指引',
          icon: 'none'
        })
        return;
      }

      uni.showLoading({
        title: '保存中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        uni.login({
          success: result => {
            var code = result.code;

            this.$http.post('/index/Api/getOpenid', {code}).then(res => {
              if (res.data.result === 1) {
                formData.openid = res.data.data;

                this.$http.post('/Index/Api/login', formData).then(res => {
                  uni.removeStorageSync('timestamp');
                  uni.hideLoading();

                  if (res.data.result === 1) {
                    var user_id = res.data.data;
                    uni.setStorageSync('user_id', user_id)

                    this.show_login = false;

                    var scene_user_id = uni.getStorageSync('scene_user_id') ? uni.getStorageSync('scene_user_id') : 0;
                    this.userCenter(user_id, scene_user_id)
                  } else {
                    this.$common.doErrorResult(res);
                  }
                })
              } else {
                this.$common.doErrorResult(res);
              }
            })
          }
        })
      }
    },

    goUserDetail: function (user_id){
      uni.navigateTo({
        url: '/pages/user_details/user_details?user_id=' + user_id
      })
    },

    changeTab: function (index) {
      this.page = 1;

      if (index == 1) {
        // 推荐
        this.tab = index;
        this.searchUserList();
      } else {
        // 匹配我的
        var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
        if (user_id) {
          this.tab = index;
          this.searchUserList();
        } else {
          uni.showLoading({
            title: '自动登录中...',
            mask: true
          })

          uni.login({
            success: result => {
              var code = result.code;

              this.$http.post('/index/Api/openidToUserid', {code}).then(res => {
                uni.hideLoading();
                if (res.data.result === 1) {
                  var user_id = res.data.data;
                  uni.setStorageSync('user_id', user_id)
                  this.tab(index)
                  this.searchUserList();
                } else {
                  this.show_login = true;
                }
              })
            }
          })
        }
      }
    },

    toggleFilterBox() {
      this.showFilterBox = !this.showFilterBox; // 切换弹框显示状态
    },

    closePopup: function () {
      this.popupType = '';
      this.popup = false;
    },

    openPopup: function (type) {
      this.popupType = type;
      this.popup = true;
    },

    // 搜索条件处理 START

    // 搜索ID或者姓名
    changeInput: function (e) {
      var value = e.detail.value;
      this.search_info.idOrName = value;
    },

    // 选择性别
    clickGender: function (gender) {
      this.search_info.gender = gender;
    },


    bindChange: function (e) {
      var value = e.detail.value,
        popupType = this.popupType;

      switch (popupType) {
        case 'age':
          this.ageChooseValue = value;
          break;
        case 'height':
          this.heightChooseValue = value;
          break;
        case 'weight':
          this.weightChooseValue = value;
          break;
        case 'residence':
          this.residenceChooseValue = value;
          break;
        case 'hukou':
          this.hukouChooseValue = value;
          break;
        case 'marital_status':
          this.maritalStatusChooseValue = value;
          break;
        case 'education_level':
          this.educationLevelChooseValue = value;
          break;
        case 'occupation':
          this.occupationChooseValue = value;
          break;
        case 'annual_income':
          this.annualIncomeChooseValue = value;
          break;
        case 'housing_status':
          this.housingStatusChooseValue = value;
          break;
        case 'car_status':
          this.carStatusChooseValue = value;
          break;
        case 'has_children':
          this.hasChildrenChooseValue = value;
          break;
      }
    },
    // 搜索条件处理 END

    confirmChoose: function () {
      var popupType = this.popupType

      switch (popupType) {
        case 'age':
          var ageChooseValue = this.ageChooseValue.sort();
          this.ageChooseValue = ageChooseValue;
          this.search_info.age = this.ageData[ageChooseValue[0]] + '岁-' + this.ageData[ageChooseValue[1]] + '岁';
          break;
        case 'height':
          var heightChooseValue = this.heightChooseValue.sort();
          this.heightChooseValue = heightChooseValue;
          this.search_info.height = this.heightData[heightChooseValue[0]] + 'cm-' + this.heightData[heightChooseValue[1]] + 'cm';
          break;
        case 'weight':
          var weightChooseValue = this.weightChooseValue.sort();
          this.weightChooseValue = weightChooseValue;
          this.search_info.weight = this.weightData[weightChooseValue[0]] + 'kg-' + this.weightData[weightChooseValue[1]] + 'kg';
          break;
        case 'residence':
          var region = this.region,
            residenceChooseValue = this.residenceChooseValue;
          this.search_info.residence = region[residenceChooseValue[0]].name + '-' + region[residenceChooseValue[0]].city_list[residenceChooseValue[1]].name;
          break;
        case 'hukou':
          var region = this.region,
            hukouChooseValue = this.hukouChooseValue;
          this.search_info.hukou = region[hukouChooseValue[0]].name + '-' + region[hukouChooseValue[0]].city_list[hukouChooseValue[1]].name;
          break;
        case 'marital_status':
          this.search_info.marital_status = this.maritalStatusData[this.maritalStatusChooseValue];
          break;
        case 'education_level':
          this.search_info.education_level = this.educationLevelData[this.educationLevelChooseValue];
          break;
        case 'occupation':
          this.search_info.occupation = this.occupationData[this.occupationChooseValue];
          break;
        case 'annual_income':
          this.search_info.annual_income = this.annualIncomeData[this.annualIncomeChooseValue];
          break;
        case 'housing_status':
          this.search_info.housing_status = this.housingStatusData[this.housingStatusChooseValue];
          break;
        case 'car_status':
          this.search_info.car_status = this.carStatusData[this.carStatusChooseValue];
          break;
        case 'has_children':
          this.search_info.has_children = this.hasChildrenData[this.hasChildrenChooseValue];
          break;
      }

      this.closePopup();
    },

    reset: function (){
      this.is_search = 0;
      this.search_info = {
        idOrName: '',
        gender: '',
        age: '',
        height: '',
        weight: '',
        residence: '',
        hukou: '',
        marital_status: '',
        education_level: '',
        occupation: '',
        annual_income: '',
        housing_status: '',
        car_status: '',
        has_children: ''
      }
    },

    search: function (){
      this.page = 1;
      this.showFilterBox = false;
      this.is_search = 1;
      this.searchUserList();
    },

    loadMore: function () {
      this.searchUserList(this.page + 1);
    },

    searchUserList: function (incPage = 0) {
      var page = incPage ? incPage : this.page,
        requirement_info = this.requirement_info;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      var formData = {
        user_id: uni.getStorageSync('user_id'),
        tab: this.tab,
        is_search: this.is_search,
        page: page,
        pagesize: this.pagesize
      };

      if (this.tab == 2) {
        var formData = {...formData, ...requirement_info};
      }else{
        var formData = {...formData, ...this.search_info};
      }

      this.$http.post('/index/Api/searchUserList', formData).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          if (page == 1) this.list = [];

          uni.hideLoading();
          this.$common.doErrorResult(res);
        }
      })
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  button{
    border: none;
    padding: 0;
    margin: 0;
  }

  .operation-box {
    margin-top: 40rpx;
    width: 86%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tab-box {
      display: flex;
      align-items: center;

      .active-icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }

      .tab {
        font-size: 32rpx;
        margin-right: 40rpx;
      }

      .active {
        font-size: 40rpx;
      }
    }

    .more-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .more-text{
        color: #F30E0E;
        font-size: 34rpx;
        font-weight: bold;
      }
      .icon {
        width: 34rpx;
        height: 34rpx;
      }
    }
  }

  .list-box {
    width: 86%;
    height: 83vh;
    margin-top: 20rpx;

    .box {
      display: flex;
      justify-content: space-between;
      padding: 14rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-top: 20rpx;

      &:first-child {
        margin-top: 0;
      }

      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        min-width: 120rpx;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        .tag {
          width: 80rpx;
          padding: 4rpx 0;
          background: #FCC2D3;
          border-radius: 10rpx;
          font-size: 28rpx;
          text-align: center;
        }

        .nan {
          background: #1B54F3;
          color: #fff;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 40rpx;

        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 14rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .text {
            font-size: 28rpx;
            font-weight: bold;
          }

          .sex {
            width: 30rpx;
            height: 30rpx;
          }

          .yq-text {
            font-size: 24rpx;
          }
        }

        .tag-box {
          display: flex;
          margin-bottom: 14rpx;

          .tag {
            padding: 4rpx 10rpx;
            background: #FCC2D3;
            border-radius: 10rpx;
            font-size: 24rpx;
            margin-right: 10rpx;

            &:last-child {
              margin-right: 0;
            }
          }
          .nan {
            background: #1B54F3;
            color: #fff;
          }
        }
      }
    }
  }


  // 搜索区域样式
  .filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); // 蒙层背景
    z-index: 10; // 确保在其他元素上方
  }

  .filter-box {
    position: fixed;
    top: 0;
    right: -100%; // 初始位置在右边外部
    width: 73vw; // 弹框宽度
    height: 100vh;
    background: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease; // 动画效果
    z-index: 20; // 确保在蒙层上方

    &.show {
      right: 0; // 显示时的右边位置
    }

    .filter-content {
      display: flex;
      flex-direction: column;
      padding: 20rpx 40rpx;

      .sc {
        font-size: 40rpx;
      }

      .sc-input {
        width: calc(100% - 40rpx);
        padding: 10rpx 20rpx;
        border: 2rpx solid #dad6d6;
        border-radius: 20rpx;
        margin-top: 35rpx;
      }

      .sex-box {
        margin-top: 30rpx;

        .all-sex-box {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;

          .box {
            flex: 1;
            padding: 10rpx 20rpx;
            font-size: 32rpx;
            border: 2rpx solid #dad6d6;
            border-radius: 20rpx;
            margin-right: 20rpx;
            text-align: center;

            &:last-child {
              margin-right: 0;
            }
          }

          .active {
            border: 2rpx solid #F30E0E;
          }
        }
      }

      .choose-box {
        margin-top: 60rpx;

        .row {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30rpx;
          font-size: 32rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .res-box {
            display: flex;

            .res {
              flex: 1;
              margin-right: 20rpx;
              text-align: right;
            }

            .icon {
              width: 20rpx;
              height: 28rpx;
            }
          }
        }
      }

      .btn-box {
        margin-top: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn {
          font-size: 36rpx;
          padding: 20rpx 60rpx;
          border-radius: 20rpx;
          border: 2rpx solid #dad6d6;
        }

        .search-btn {
          background: #F30E0E;
          color: #fff;
          border: none;
        }
      }
    }
  }

  //  年龄范围
  .popup-overlay {
    position: fixed;
    width: 100vw;
    right: 0;
    bottom: -100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 30;
    transition: bottom 0.3s ease; // 动画效果

    &.show {
      bottom: 0;
      top: 0;
    }

    .popup-content {
      background: white;
      padding: 20px;
      width: 100%;

      .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;

        .confirm-btn {
          color: #F30E0E;
        }
      }

      .picker-view {
        width: 100%;
        height: 600rpx;
        margin-top: 20rpx;
      }

      .item {
        line-height: 100rpx;
        text-align: center;
      }
    }
  }
}
</style>
